<template>
  <div class="time-slider-cell-detail">
    <el-table :data="itemData" style="width: 100%">
      <el-table-column label="时间" width="120">
        <template #default="scope">
          {{ workMillise(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column label="项目" width="200">
        <template #default="scope">
          {{ category(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="说明" />
      <el-table-column label="" width="50">
        <template #default="scope">
          <el-button type="danger" :icon="Delete" @click="handlerClickBtnDelele(scope.row.id)" size="small" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import IProjectTypes from '../../interface/IProjectTypes'
import { Delete } from '@element-plus/icons-vue'

const emits = defineEmits(['clickBtnDelele'])
const props = defineProps({
  itemData: { type: Array as any, default: () => [] },
  timelogCategory: {
    type: Array<IProjectTypes>,
    required: true,
    default: () => [{ dictCode: 0 }],
  },
})

//
const workMillise = (item: any) => {
  let res = ''
  if (item) {
    // {{ scope.row.startTime }}
    // {{ scope.row.endTime }}
    const startTime = item.startTime.slice(-5)
    const endTime = item.endTime.slice(-5)
    // console.log('endTime', endTime)
    res = startTime + '-' + endTime
  }
  return res
}
//
const category = (item: any) => {
  let res = ''
  if (item) {
    if (item.timelogCategory == 0) {
      res = `${item.projectCode} - ${item.projectName}`
    } else {
      res = props.timelogCategory.find((e) => e.dictValue == item.timelogCategory)?.dictLabel || ''
    }
  }
  return res
}

const handlerClickBtnDelele = (id: number) => {
  emits('clickBtnDelele', id)
}
</script>
<style lang="scss" scoped>
.time-slider-cell {
  // pointer-events: none;
  display: flex;
  .cell-mn {
    display: flex;
    align-items: center;
    flex: 1;
    .clock {
      display: flex;
      align-items: center;
      .tag {
        margin-left: 2px;
      }
    }
    .category {
      margin-left: 10px;
      font-weight: bold;
    }
    .remark {
      flex: 1;
      overflow: hidden;
      position: relative;
      margin: 0 10px;
      height: 100%;
      .txt {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
